<template>
  <div class='background'>
    <div class='bigtitle'>
      统一门户管理系统
    </div>

    <div class="login_box">
      <el-container>
        <el-aside width="50%">
          <div class="login_pic"/>
        </el-aside>
        <el-main class="form_container">
          <div class="login_title">统一身份认证</div>
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="0" class="login_form">
            <el-form-item  prop="username">
              <el-input  v-model="ruleForm.username" placeholder="请输入用户名"  ><i slot="prefix" class="el-icon-user-solid" style="padding-left: 5px"></i></el-input>
            </el-form-item>
            <el-form-item prop="pass" style='margin-top: 30px'>
              <el-input type="password" v-model="ruleForm.pass" autocomplete="off" placeholder="请输入密码" ><i slot="prefix" style="padding-left: 5px" class="el-icon-lock"></i></el-input>
            </el-form-item>

            <el-form-item class="btns" style='margin-top: 60px'>
              <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
              <el-button type="info"@click="registerForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>

    </div>
  </div>

</template>

<script>
	export default {
		name:'login',
			data() {
				var validateUsername = (rule, value, callback) => {
					if (value === '') {
						callback(new Error('请输入用户名'));
					} else {
						if (this.ruleForm.pass !== '') {
							this.$refs.ruleForm.validateField('pass');
						}
						callback();
					}
				};
				var validatePass = (rule, value, callback) => {
					if (value === '') {
						callback(new Error('请输入密码'));
					} else {
						callback();
					}
				};
				return {
					ruleForm: {
						pass: '',
						username: ''
					},
					rules: {
						pass: [{
							validator: validatePass,
							trigger: 'blur'
						}],
						username: [{
							validator: validateUsername,
							trigger: 'blur'
						}]
					}
				};
			},
		methods: {

			submitForm(){
				var name = this.ruleForm.username;
				var pass = this.ruleForm.pass;

				this.$axios.post(
				`/user/login?userName=`+name+`&password=`+pass)
				.then(res=>{
					const data =res.data;
					if(data.code == 200){// 登录成功
            const aUrl = window.location.search;
            console.log(aUrl.length);
            const bUrl = window.sessionStorage.getItem("url")
            if(bUrl != null){
              this.$router.push({
                path: bUrl
              })
              window.sessionStorage.clear("url")
            }else if(aUrl.length !=0){

              var cUrl = aUrl.slice(5);
              // console.log(bUrl);
              var cUrl = cUrl.replace(/%3A/g,":")
              var cUrl = cUrl.replace(/%2F/g,"/")
              // console.log(cUrl);
              window.location.href=""+cUrl+"?token="+data.data+"";
            }else{
              this.$router.push({
							path:`/common`
						}).catch(() =>{});
            }

						//把数据存储到vuex里（token）
            window.sessionStorage.setItem("token", data.data);

						/* if(data.data.role == 2){
							this.$store.commit('admin');
							this.$router.push({
								path:`/admin`
							}).catch(() =>{});
						}else if(data.data.role == 1){
							this.$store.commit('superAdmin');
							this.$router.push({
								path:`/admin`
							}).catch(() =>{});
						} */
					}
					else {

            this.$alert(data.message, '提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.function()
              }
            });


            //alert(data.message);
						// alert("用户名或密码错误,请重新输入");
						this.ruleForm.username = '';
						this.ruleForm.pass = '';
					}

				});
			},
			registerForm(){
				this.ruleForm.username = '';
				this.ruleForm.pass = '';
			}
		},

	}
</script>

<style scoped>


.login_box {
  width: 40%;
  min-width: 600px;
  background-color: #fff;
  border-radius: 5px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.login_title{
  font-size: 14pt;
  letter-spacing:2px;
  justify-content: center;
  display: flex;
  margin-top:30px;
}

.login_form {
  margin-top: 15%;
  bottom: 0;
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}
.form_container{
  background: #FFFFFF;
  border-radius: 5px;
}
.login_pic{
  background: url(../../assets/images/loginpic.png) no-repeat center top;
  border-radius: 5px;
  width:100%;
  height:100%;  /**宽高100%是为了图片铺满屏幕 */
  background-size: cover;
}

.background{
  background: url(../../assets/images/background.jpg) no-repeat center top;
  width:100%;
  height:100vh;  /**宽高100%是为了图片铺满屏幕 */
  background-size: cover;
  position: relative;
}

.btns {
  display: flex;
  justify-content: space-between;
}
.bigtitle{
  display: flex;
  font-size: 24pt;
  color: #ffffff;
  position: relative;
  justify-content: center;
  letter-spacing:10px;
  top:15%;
}



</style>
